<template>
    <div class="addEditArticlePageCont">
      <div class='title'>当前位置：问答管理 / {{articleTitle}}</div>
      <div class="addEditArticlePageMian">
        <Form ref="formAddEditArticle" :model="formAddEditArticle" :rules="ruleAddEditArticle" :label-width="110">
          <FormItem label="问答分类：">
            <Row>
                <Col span="11">
                  <FormItem prop="QAclassification">
                    <Select v-model="formAddEditArticle.QAclassification" placeholder="请选择问答分类" filterable style=" width: 100%;">
                      <Option v-for="(item, index) in QAclassificationList" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11" offset="2" v-if="formAddEditArticle.QAclassification == 4">
                  <FormItem prop="relatedEstate">
                    <Select
                      v-model="formAddEditArticle.relatedEstate"
                      filterable
                      placeholder="请选择关联楼盘"
                      :remote-method="servicePersonnelSearch">
                      <Option v-for="(item, index) in autoCompleteList" :value="item.buildingId" :key="index">{{ item.buildingAlias }}</Option>
                    </Select>
                  </FormItem>
                </Col>
            </Row>
          </FormItem>
          <FormItem label="问题描述：" prop="problemDescription">
            <Input v-model="formAddEditArticle.problemDescription" placeholder="请输入问题描述"></Input>
          </FormItem>
          <FormItem label="答案：" prop="answer">
            <Input type="textarea" :rows="4" v-model="formAddEditArticle.answer" placeholder="请输入答案"></Input>
          </FormItem>
          <div class="footer">
              <Button type="primary" @click="addEditArticleSubmit('formAddEditArticle')">{{$route.query.type == 'add' ? '提交审核' : '确定'}}</Button>
              <Button @click="addEditArticleReset('formAddEditArticle')" style="margin-left: 8px">取消</Button>
          </div>
        </Form>
      </div>
    </div>
</template>
<script>
  import { faqsCreate, buildingList, faqsGetDetails, faqsUpdate } from "@/api/materialManagement.js";
  export default {
    components: {

    },
    data() {
      return {
        autoCompleteList: [],
        articleTitle: '',
        QAclassificationList: [{label: '产品使用', value: '1'}, {label: '政策行情', value: '2'}, {label: '法务知识', value: '3'}, {label: '楼盘问答', value: '4'}, {label: '其他', value: '5'}],
        formAddEditArticle: {
          QAclassification: '',
          problemDescription: '',
          answer: '',
          relatedEstate: ''
        },
        ruleAddEditArticle: {
          QAclassification: [
            { required: true, message: '请选择问答分类', trigger: 'change' }
          ],
          relatedEstate: [
            { required: true, message: '请选择关联楼盘', trigger: 'change' }
          ],
          problemDescription: [
            { required: true, message: '请输入问题描述', trigger: 'blur' },
            { max: 100, message: '不可超过100个字符', trigger: 'blur' }
          ],
          answer: [
            { required: true, message: '请输入答案', trigger: 'blur' },
            { max: 200, message: '不可超过200个字符', trigger: 'blur' }
          ]
        },
        editor: null
      }
    },
    methods: {
      // 关联楼盘
      servicePersonnelSearch(value) {
          if(!value) {
            this.autoCompleteList = []
          } else {
            buildingList({buildingAlias: value}).then(res=>{
              if (res) {
                this.autoCompleteList = res.list
              }
            }).catch(err=>{
              this.$Message.error(err)
            })
          }
      },
      // form 表单
      addEditArticleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.$route.query.type == 'add'){
              let params =  {
                answerDesc: this.formAddEditArticle.answer,
                questionDesc: this.formAddEditArticle.problemDescription,
                questionType: this.formAddEditArticle.QAclassification
              }
              if (this.formAddEditArticle.QAclassification == 4) {
                params.buildingId = this.formAddEditArticle.relatedEstate
              }
              faqsCreate(params).then(res=>{
                this.$Message.success('新增问答成功!');
                this.$router.go(-1);
              }).catch(err=>{
                this.$Message.error(err)
              })
            } else {
              let params =  {
                questionAnswerId: this.$route.query.questionAnswerId,
                answerDesc: this.formAddEditArticle.answer,
                questionDesc: this.formAddEditArticle.problemDescription,
                questionType: this.formAddEditArticle.QAclassification
              }
              if (this.formAddEditArticle.QAclassification == 4) {
                params.buildingId = this.formAddEditArticle.relatedEstate
              }
              faqsUpdate(params).then(res=>{
                this.$Message.success('修改问答成功!');
                this.$router.go(-1);
              }).catch(err=>{
                this.$Message.error(err)
              })
            }
          }
        })
      },
      addEditArticleReset (name) {
        this.$router.go(-1);
      }
    },
    computed: {

    },
    created() {
      // 判断新增与编辑
      if (this.$route.query.type == 'add') {
        this.articleTitle = '新增问答'
        document.title = '新增问答'
      } else if (this.$route.query.type == 'edit') {
        this.articleTitle = '编辑问答'
        document.title = '编辑问答'
        faqsGetDetails({questionAnswerId: this.$route.query.questionAnswerId}).then(res=>{
          if(res) {
            this.formAddEditArticle.QAclassification = res.questionType
            this.formAddEditArticle.problemDescription = res.questionDesc
            this.formAddEditArticle.answer = res.answerDesc
            if (res.questionType == '4') {
              this.formAddEditArticle.relatedEstate = res.buildingId
              this.autoCompleteList.push({buildingId: res.buildingId, buildingAlias: res.buildingName})
            }
          }
        }).catch(err=>{
          this.$Message.error(err)
        })
      }
    },
    mounted() {

    },
    watch: {

    },
  }
</script>
<style lang="scss" scoped>
  .addEditArticlePageCont{
    .title{
        background-color: #f5f5f5;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        padding: 0 14px 10px;
    }
    .addEditArticlePageMian{
      margin-top: 16px;
      width: 800px;
    }
  }
  .footer{
    text-align: center;
    button{
      width: 90px;
      margin: 0 10px;
    }
  }

  /deep/ .ivu-select-dropdown.ivu-auto-complete {
    overflow-y: auto;
    max-height: 200px;
  }
</style>
